<template>
    <div>
        <h5>REST参数</h5>
        <p>转存到仓库的参数(因为路由缓存的问题-在同路径下参数变化的切换不会触发生命周期，所以数据未更新)</p>
        <pre>{{ rest }}</pre>
        <p>直接通过$route获取的参数</p>
        <input type="button" value="手动加载REST参数" @click="getRest()">
        <input type="button" value="$route加载REST参数" @click="getRest2()">
    </div>
</template>

<script>

export default {
    data() {
        return {
            rest: {}
        }
    },
    methods: {
        getRest() {
            let rest = location.hash;
            let arr = rest.replace(/^#\//,"").split("/");
            console.log(arr);
            //     0     1    2   3
            // /params/rest/:id/:name
            this.rest.id = arr[2];
            this.rest.name = arr[3];
        },
        getRest2() {
            this.rest = this.$route.params;
        }
    },
    created(){
        console.log(this.$route.params);
        this.getRest2();
    }
}
</script>

<style lang="scss" scoped>

</style>